<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" class="box">
        <div ref="nav" class="nav">
            <div class="navBtn" @click="navBtn"></div>
            <ul class="nav1" v-if="flag">
                <li><span>首页</span></li>
                <li><span>目的地</span></li>
                <li><span>酒店</span></li>
                <li><span>机票</span></li>
                <li><span>时间</span></li>
                <li><span>点评</span></li>
            </ul>
            <ul class="nav2" v-else>
                <li><span>Icon</span></li>
                <li><span>Icon</span></li>
                <li><span>Icon</span></li>
                <li><span>Icon</span></li>
                <li><span>Icon</span></li>
                <li><span>Icon</span></li>
            </ul>
        </div>
        <div ref="content" class="content">
            <div class="contentTop">
                <p>国内旅游计划</p>
            </div>
            <div class="contentList" v-for="item in contentList">
                <div class="contentBox">
                    <img class="contentBox_bg" v-bind:src="item.bgImg">
                    <div class="mask"></div>
                    <div class="contentUser">
                        <img v-bind:src="item.formUser">
                        <span>{{item.title}}</span>
                    </div>
                    <div class="day"><p>{{item.day}}</p></div>
                    <p class="city"><span>城市</span><span>{{item.city}}</span></p>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                contentList: [
                    { bgImg: './img/fengjing.jpg', formUser: './img/touxiang.jpg', title: '我的旅游行程', day: '14天', city: '昆明 - 香格里拉 - 西藏' },
                    { bgImg: './img/huadong.jpg', formUser: './img/touxiang.jpg', title: '我的旅游行程', day: '15天', city: '北京 - 常州 - 苏州' }
                ],
                flag: true,
            }

        },
        created() {

        },
        methods: {
            navBtn: function () {
                if(this.flag){
                    this.$refs.nav.style.width = "7%"
                    this.$refs.content.style.width = "93%"
                    this.flag = false;
                }else{
                    this.$refs.nav.style.width = "25%"
                    this.$refs.content.style.width = "75%"
                    this.flag = true;
                }


            },
        }
    })
</script>
</html>